<style>
    #articleAdd {
        padding: 20px 25px 25px 0;
    }

    #articleAdd .layui-treeSelect .ztree li a, .ztree li span {
        margin: 0 0 2px 3px !important;
    }
</style>

<div class="layui-fluid" id="activityAdd">
    <form class="layui-form" action="" id="activityAdd-form" lay-filter="activityAdd-form" enctype="multipart/form-data">
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">活动名称</label>
            <div class="layui-input-block">
                <input type="text" autocomplete="off" name="name" lay-verify="required" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-form-item">
                <label class="layui-form-label">活动头图</label>
                <div class="layui-input-block">
                    <button  type="button" class="layui-btn" id="upload_headPhoto">
                        <i class="layui-icon">&#xe67c;</i>上传活动头图
                    </button>
                    <div id="result_headPhoto"></div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">限额人数</label>
            <div class="layui-input-block">
                <input type="text" name="limitNumber" autocomplete="off" lay-verify="required|number" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">活动价格</label>
            <div class="layui-input-block">
                <input type="text" name="price" autocomplete="off" lay-verify="required|number" class="layui-input">
            </div>

        </div>



        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">活动位置</label>
            <div class="layui-input-block">
                <input type="text" name="position" id="position" lay-verify="required"   autocomplete="off" value="新亚大厦"  class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">结束时间</label>
            <div class="layui-input-block">
                <input type="text" name="endTime"   lay-verify="required" placeholder="请选择结束时间" id="endTime" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">分销百分比</label>
            <div class="layui-input-block">
                <input type="text" name="distribution" autocomplete="off" lay-verify="required|number" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">客服手机号</label>
            <div class="layui-input-block">
                <input type="text" name="serviceTel" autocomplete="off" lay-verify="required|phone" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">背景颜色</label>
            <div class="layui-input-inline" style="width: 120px;">
                <input type="text" value="" placeholder="请选择颜色" lay-verify="required" name="backgroundColor" class="layui-input" id="test-form-input">
            </div>
            <div class="layui-inline" style="left: -11px;">
                <div id="test-form"></div>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">是否发布</label>
            <div class="layui-input-block">
                <select name="isPublish" id="isPublish" lay-filter="isPublish"
                        lay-verify="required">
                    <option value="">请选择是否发布</option>
                    <option value="1">发布</option>
                    <option value="0">未发布</option>
                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label  febs-form-item-require" >客服微信二维码</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="upload_wechat">
                    <i class="layui-icon">&#xe67c;</i>上传客服微信二维码
                </button>
                <div id="result_wechat"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label  febs-form-item-require">背景音频</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="upload_videoUrl">
                    <i class="layui-icon">&#xe67c;</i>上传背景音频
                </button>
                <div id="result_videoUrl"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label  febs-form-item-require">活动内容</label>
            <div class="layui-input-block">
                <input type="hidden" name="remark" id="remark">
                <div id="editor"></div>
            </div>
        </div>


        <div class="layui-form-item" hidden>
            <button class="layui-btn"   lay-submit=""  lay-filter="activityAdd-form-submit" id="submit"></button>
            <button type="reset" class="layui-btn " id="reset"></button>
            <input type="hidden" name="test">
        </div>
    </form>
</div>
<!--data-th-inline="none" type="text/javascript"-->
<script data-th-inline="javascript">
    layui.use(['febs','layedit', 'form', 'laydate', 'upload', 'colorpicker','validate','jquery'], function () {
        var $ = layui.$,
            febs = layui.febs,
            layer = layui.layer,
            form = layui.form,
            upload = layui.upload,
            laydate = layui.laydate,
            colorpicker = layui.colorpicker,
            // project = [[${project}]],
            validate = layui.validate;


        form.verify(validate);
        form.render();

        var E = window.wangEditor;
        var editor = new E('#editor');
        // 或者 var editor = new E( document.getElementById('editor') )
        //开启debug模式
        editor.config.debug = true;
        // 关闭粘贴内容中的样式
        editor.config.pasteFilterStyle = false;
        // 忽略粘贴内容中的图片
        editor.config.pasteIgnoreImg = true;

        // 配置服务器端地址
        editor.config.uploadImgServer = ctx + 'activity/uploadActivityPic';
        //自定义 fileName
        editor.config.uploadFileName = 'file';

        // 自定义菜单配置
        editor.config.menus = [
            'bold',  // 粗体
            'fontSize',  // 字号
            'fontName',  // 字体
            'italic',  // 斜体
            'underline',  // 下划线
            'strikeThrough',  // 删除线
            'foreColor',  // 文字颜色
            'backColor',  // 背景颜色
            'link',  // 插入链接
            'list',  // 列表
            'justify',  // 对齐方式
            'quote',  // 引用
            'emoticon',  // 表情
            'image',  // 插入图片
            'table',  // 表格
            'undo',  // 撤销
            'redo'  // 重复
        ]

        editor.create();

        // editor.txt.html(project.projectContent);

        laydate.render({
            elem: '#startTime' //指定元素
            ,calendar: true
            ,type: 'datetime'
        });

        laydate.render({
            elem: '#endTime' //指定元素
            ,calendar: true
            ,type: 'datetime'
        });

        upload.render({
            elem: '#upload_headPhoto', //绑定元素
            accept: "images",
            field: "headPhoto_file",
            acceptMime: 'image/*',//打开文件选择框时,只显示图片文件
            auto: false,  //是否选完文件后自动上传。默认值：true
            // bindAction: '#btnSub',
            choose: function (obj) {
                obj.preview(function (index, file, result) {
                    // $('#headImage').attr('src', result);
                    $("#result_headPhoto").html(file.name);
                })
            }
        });


        // $("#position").click(function () {
            // layer.open({
            //     type: 1,
            //     title:'地址选择',
            //     area: ['800px', '600px'],
            //     content: $('#container'),
            //     success:function () {
            //         var map = new BMap.Map("maplocation"); // 创建地图实例
            //
            //         map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
            //         var point = new BMap.Point(116.404, 39.915); // 创建点坐标
            //         map.centerAndZoom(point, 12);
            //
            //         function myFun(result){
            //             var cityName = result.name;
            //             map.setCenter(cityName);
            //             //alert("当前定位城市:"+cityName);
            //         }
            //         var myCity = new BMap.LocalCity();
            //         myCity.get(myFun);
            //
            //
            //         var marker = new BMap.Marker(map.getCenter());  // 创建标注
            //         map.addOverlay(marker);               // 将标注添加到地图中
            //         marker.enableDragging();                //可拖拽
            //         //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            //
            //
            //         map.addEventListener("click",function(e){
            //             // alert(e.point.lng+","+e.point.lat);// 单击地图获取坐标点；
            //             //$('#lng').val(e.point.lng);
            //             //$('#lat').val(e.point.lat);
            //             //map.panTo(new BMap.Point(e.point.lng,e.point.lat));// map.panTo方法，把点击的点设置为地图中心点
            //         });
            //
            //         marker.addEventListener("dragend", function(e){                    //拖拽标注获取标注坐标
            //             //alert("当前位置：" + e.point.lng + ", " + e.point.lat);           //可拖拽的标注
            //             $('#lng').val(e.point.lng);
            //             $('#lat').val(e.point.lat);
            //         })
            //
            //         //加载完成之后,改变标注点坐标,使之和当前定位的城市基本相符
            //         map.addEventListener("tilesloaded",function(){
            //             var newpoint = map.getCenter();
            //             marker.setPosition(newpoint);
            //         });
            //     },
            //     cancel:function(){
            //
            //     }
            // });
        //     febs.modal.open('修改活动', 'system/activity/toPosition/' , {
        //         area: ['50%', '70%'],
        //         btn: ['提交', '取消'],
        //         yes: function (index, layero) {
        //             // $('#activity-update-form').find('#submit').trigger('click');
        //         },
        //         btn2: function () {
        //             layer.closeAll();
        //         }
        //     });
        // })

        colorpicker.render({
            elem: '#test-form'
            ,color: '#1c97f5'
            ,done: function(color){
                $('#test-form-input').val(color);
            }
        });

        upload.render({
            elem: '#upload_videoUrl', //绑定元素
            accept: "audio",
            field: "videoUrl_file",
            acceptMime: 'audio/*',//打开文件选择框时,只显示图片文件
            auto: false,  //是否选完文件后自动上传。默认值：true
            // bindAction: '#btnSub',
            choose: function (obj) {
                obj.preview(function (index, file, result) {
                    $("#upload_videoUrl").html(file.name);
                })
            }
        });

        upload.render({
            elem: '#upload_wechat', //绑定元素
            accept: "images",
            field: "wechat_file",
            acceptMime: 'image/*',//打开文件选择框时,只显示图片文件
            auto: false,  //是否选完文件后自动上传。默认值：true
            // bindAction: '#btnSub',
            choose: function (obj) {
                obj.preview(function (index, file, result) {
                    $("#upload_wechat").html(file.name);
                })
            }
        });


            var locked = false;
            form.on('submit(activityAdd-form-submit)', function (data) {
                var formData = new FormData(document.getElementById("activityAdd-form"));
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                data.field.content = editor.txt.html();
                formData.set("content", data.field.content);
                if (!locked){
                locked = true;
                $.ajax({
                    url: ctx + 'activity/addOrUpdate',
                    data: formData,
                    type: 'post',
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        if (data.code == 200) {
                            layer.msg('操作成功', {
                                icon: 6,
                                time: 1000
                            }, function () {
                                locked = false;
                                layer.closeAll();
                                $('#activity').find('#reset').click();
                                $('#febs-share').find('#reset').click();
                            });
                        } else {
                            layer.msg(data.message, {
                                icon: 5,
                                time: 1000
                            },function () {
                                locked = false;
                            });
                        }
                    },
                    error: function (data) {
                        layer.msg('操作失败', {
                            icon: 5,
                            time: 1000
                        },function () {
                            locked = false;
                        });
                    }
                });
                }
                return false;
            });

    });
</script>